<template>
  <div class="login-container">
    <h3 class="login-title">系统登录</h3>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
      <el-form-item label="用户账号" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号" ></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" ></el-input>
      </el-form-item>
      <el-form-item class="login-btn">
        <el-button type="primary" @click="login">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {userLogin} from "@/api/user";

export default {
  name: "Login",
  data(){
    return {
      ruleForm:{
        username:'lisi',
        password:'123123'
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min:4,message: '账号长度不小于4位',trigger:'blur'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    login(){
      userLogin(this.ruleForm).then((res)=>{
        const {data} = res;
        if(data.code === 200){
          this.$store.commit('setToken',data.data.token);
          this.$store.commit("setUserInfo", data.data.userInfo)
          this.$router.push("/home")
        }else{
          this.$message("登录失败!")
        }
      }).catch(err=>{
        console.log(err)
      })

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped lang="less">
.login-container{
  margin: 120px auto;
  width: 400px;
  border:1px solid #D3DCE6;
  border-radius: 15px;
  padding: 10px 45px;
  background-clip: padding-box;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;
  .login-title{
    margin: 30px auto;
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    color: #585458;
  }
}
</style>